<!--
 * @Description:
 * @version: 添加注释
 * @Author: 潘骏杰
 * @Date: 2022-04-1 14:22:37
 * @LastEditors: 周子尧
 * @LastEditTime: 2022-04-11 09:35:14

-->

<!--
 * @Description:
 * @version: 签约任务业务组件
 * @Author: 陈捷
 * @Date: 2022-03-31 11:19:15
 * @LastEditors: 陈捷
 * @LastEditTime: 2022-04-01 14:19:58

-->
<template>
  <van-tab title="签约任务">
    <!-- 2020-03-31 pjj -->
    <!-- 签约任务模块 有时间 整个单独抽出组件 start-->
    <div class="tab-ul">
      <van-row gutter="20">
        <van-col v-for="item in qianyueList" :key="item.type" span="12">
          <div class="li-back">
            <div class="li-left">
              <!-- 找png直接替换 -->
              <div class="listImg">
                <img :src="tupianList[item.type].image" alt="">
                <!-- <img
                  v-if="item.type === '0'"
                  src="@/assets/images/icon/intention.png"
                />
                <img
                  v-else-if="item.type === '1'"
                  src="@/assets/images/icon/apply.png"
                />
                <img v-else src="@/assets/images/icon/renewal.png" /> -->

                <!-- 状态 -->
                <!-- <div class="hasFinshed">已完成</div> -->
                <div
                  :class="{
                    waitFinshed: item.status === 'wait',
                    hasFinshed: item.status === 'finished'
                  }"
                >
                  {{ item.status === "finished" ? "已完成" : "待完成" }}
                </div>
              </div>
            </div>
            <div class="li-right" @click="Tofather(item)">
              <h3>
                {{ item.title }}<span>{{ item.time }}</span>
              </h3>
              <p class="van-ellipsis">
                <span>{{ item.name }}</span> ｜
                <span>{{ item.sex === "1" ? "男" : "女" }}</span> ｜
                <span>{{ item.address }}</span>
              </p>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 签约任务模块 有时间 整个单独抽出组件 end -->
  </van-tab>
</template>

<script>
export default {
  name: 'QianYue',
  props: {
    qianyueList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      tupianList: [
        { image: require('@/assets/images/icon/intention.png') },
        { image: require('@/assets/images/icon/apply.png') },
        { image: require('@/assets/images/icon/renewal.png') }

      ]
    }
  },
  methods: {
    Tofather(item) {
      this.$emit('getSon', item.title)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-tab--active {
  color: #4a90e2 !important;
}
/deep/ .van-tab {
  width: 96px;
  height: 33px;
  font-size: 14px;
  font-weight: 500;
  color: #4a4a4a;
}
.img img {
  width: 40px;
}

.ov-h {
  margin-bottom: 15px;
}
.listImg {
  position: relative;
}
.waitFinshed,
.hasFinshed {
  position: relative;
  top: -10px;
}
.listImg img {
  width: 50px;
}
</style>
